<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="menu-title">
         站点类型
          </div>
        </div>
        <!--右侧-->
        <div class="right">
          <el-button type="primary" size="small" @click="navtoAdd('add')"
            >新增
          </el-button>
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <!--筛选-->
       <!-- <div class="query-operate">
          <el-form
            class="demo-form-inline indoor-scene-buzhou-list-form"
            :inline="true"
            :model="TESTFROMDATA"
            @submit.native.prevent
          >
          </el-form>
        </div> -->
        <el-table :data="datalist" style="width: 100%">
          <!-- <el-table-column prop="id" label="ID" align="center" min-width="50">
          </el-table-column> -->
          <el-table-column prop="id" label="序号" align="center" min-width="50">
            <template slot-scope="scope">
              <div>
                {{ (pageNum - 1) * size + (scope.$index + 1) }}
              </div>
            </template>
          </el-table-column>
		  <el-table-column
		    prop="name"
		    label="类型名称"
		    align="center"
		    min-width="100"
		  >

		  </el-table-column>
         
          <el-table-column
            prop="icon_url"
            label="图标"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.icon_url != ''"
                :src="scope.row.icon_url"
                alt=""
                width="80px"
                height="80px"
                style="object-fit: cover;"
              />
              <img
                v-else
                src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
                alt=""
                width="80px"
                height="80px"
                style="object-fit: cover;"
              />
            </template>
          </el-table-column>
		  <el-table-column
		    prop="bubble_icon_url"
		    label="气泡图标"
		    align="center"
		    min-width="100"
		  >
		    <template slot-scope="scope">
		      <img
		        v-if="scope.row.bubble_icon_url != ''"
		        :src="scope.row.bubble_icon_url"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		      <img
		        v-else
		        src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		    </template>
		  </el-table-column>
		  <el-table-column
		    prop="unity_bubble_icon0_url"
		    label="unity正常气泡图标"
		    align="center"
		    min-width="100"
		  >
		    <template slot-scope="scope">
		      <img
		        v-if="scope.row.unity_bubble_icon0_url != ''"
		        :src="scope.row.unity_bubble_icon0_url"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		      <img
		        v-else
		        src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		    </template>
		  </el-table-column>
		  <el-table-column
		    prop="unity_bubble_icon1_url"
		    label="unity异常气泡图标"
		    align="center"
		    min-width="100"
		  >
		    <template slot-scope="scope">
		      <img
		        v-if="scope.row.unity_bubble_icon1_url != ''"
		        :src="scope.row.unity_bubble_icon1_url"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		      <img
		        v-else
		        src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
		        alt=""
		        width="80px"
		        height="80px"
		        style="object-fit: cover;"
		      />
		    </template>
		  </el-table-column>
         

         
          <el-table-column
            fixed="right"
            label="操作"
            min-width="230"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;flex-wrap: wrap; ">
               <el-button
                  type="success"
                  size="small"
                  @click="lookfiles(scope.row.id)"
                  >详情
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="navtoAdd('update', scope.row.id)"
                  >修改
                </el-button>
                <el-button type="danger" size="small" @click="del(scope.row)"
                  >删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
          :total="total"
          :currentPage="pageNum"
          :pageSize="size"
          position="right"
          @search="searchPagination"
        >
        </pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";
export default {
  components: {
    pagination
  },
  watch: {},
  data() {
    return {
      // userInfo: this.$apis.getqxbutton("设备列表"),
      // userInfo_id: JSON.parse(
      //   localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
      // ).data.id,
      // 筛选内容
      TESTFROMDATA: {
        title: ""
      },
      // 状态
      state: -1,
      stateList: [
        {
          id: -1,
          name: "全部"
        }
      ],

      // 列表的数据
      datalist: [],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    this.getListPage();
    // this.getListPage();
  },
  mounted() {},
  methods: {
   
   
    //查询列表
    getListPage() {
      var _this = this;
      var datas = {
        equipment_type: this.state,
        name: _this.TESTFROMDATA.title,
        page: _this.page,
        size: _this.size
      };
      _this.$apis.safe_supervise_type_list(datas).then(res => {
        if (res.result == 0) {
          _this.datalist = res.data;
          _this.total = res.rows;
          _this.pageNum = res.page;
        }
      });
    },
    //模糊查询
    searchList() {
      this.page = 1;
      this.datalist = [];
      this.getListPage();
    },
    //分页
    searchPagination(page) {
      this.page = page;
      localStorage.setItem("page", page);
      this.getListPage();
    },
    // 跳转详情
    lookfiles(item) {
      var _this = this;
      var datas = {
        id: item
      };
      _this.$apis.safe_supervise_type_query(datas).then(res => {
        if (res.result == 0) {
          _this.$router.push({
            path: "/admin/siteType/siteTypeDetial",
            query: {
              data: res.data
            }
          });
        }
      });
    },
    //跳转新增
    navtoAdd(type, item) {
      var _this = this;
      if (type == "add") {
        _this.$router.push({
          path: "/admin/siteType/siteTypeAdd",
          query: {
            type: type
          }
        });
      } else {
        var datas = {
          id: item
        };
        _this.$apis.safe_supervise_type_query(datas).then(res => {
          if (res.result == 0) {
            _this.$router.push({
              path: "/admin/siteType/siteTypeAdd",
              query: {
                type: type,
                // data: res.data
                data: JSON.stringify(res.data)
              }
            });
          }
        });
      }
    },
    del(item) {
      var _this = this;
      var datas = {
        id: item.id
      };
      _this
        .$confirm("确定要删除【" + item.name + "】吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.$apis.safe_supervise_type_del(datas).then(res => {
            if (res.result == 0) {
              Message.success("删除成功");
              if (_this.page > 1 && _this.datalist.length <= 1) {
                _this.page = _this.page - 1;
              }
              _this.getListPage();
            }
          });
        })
        .catch(() => {});
    },
    download() {
      window.open("https://xiaoyoushengxue.com/2022051218194530.xlsx");
    },
    downloaddata() {
      var _this = this;

      window.open(
        devConfig.apiPrefix +
          "/excel/user_all_export?user_role=" +
          _this.TESTFROMDATA.type
      );
    }
  }
};
</script>

<style>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
</style>
